<template>
	<view class="content">
		<!-- <u-navbar :is-back="false" :safeAreaInsetTop="false" height="180rpx">
		</u-navbar> -->
		<view class="conent_box">
			<u-image :src="goodInfo.goodsImage" width="100%" height="700rpx" mode="widthFix"></u-image>
			<u-toast ref="uToast" />
			<view class="introduce">
				<u-row>
					<u-col span="8">
						<u--text :text="goodInfo.goodsName" align="left" size="20" lineHeight="40" bold
							color="#000"></u--text>
						<u--text :text="goodInfo.goodsDesc" align="left" size="18" lineHeight="40" bold
							color="#333"></u--text>
					</u-col>
					<!-- <u-col span="4" customStyle="position: relative;">
						<u-icon name="share" size="34" color="#e5ca8e" @click="sharePoster"
							customStyle="position: absolute;right:0;bottom:30rpx;"></u-icon>
					</u-col> -->
				</u-row>
				<u-row>
					<u-tag :text="'已购人数:'+goodInfo.salesVolume" plain size="mini" type="warning"></u-tag>
				</u-row>
			</view>
			<u-toast ref="uToast" />
			<view class="imageUrl">
				<u--image :src="item.imageUrl" width="100%" height="1380rpx"
					v-for="(item,index) in goodInfo.detailImageList" :key="index"></u--image>
			</view>
			<u-toast ref="uToast" />
			<view style="position: fixed;bottom: 0;width: 90%; padding: 10rpx 5%;background: #fff;">
				<u-row justify="space-between" gutter="12">
					<u-col span="2" customStyle="text-align: center;border-right: 4rpx solid #b7b7b7;">
						<u--image :src="goodInfo.goodsSpecList[kind].specImage" width="40px" height="40px"
							radius="20"></u--image>
					</u-col>
					<u-col span="6">
						<u--text :text="'商品规格:'+goodInfo.goodsSpecList[kind].specName" size="14" bold lineHeight="25"
							color="#333"></u--text>
						<u-row justify="space-between" gutter="12">
							<u-col span="6">
								<u--text :text="goodInfo.goodsSpecList[kind].preferentialPrice" mode="price" size="15"
									lineHeight="25" bold color="#FF7643"></u--text>
							</u-col>
							<u-col span="6">
								<u--text :text="'原价￥'+goodInfo.goodsSpecList[kind].originalPrice" size="12"
									lineHeight="25" decoration="line-through" color="#8991A4"></u--text>
							</u-col>
						</u-row>
					</u-col>
					<u-col span="4">
						<u-button text="立即购买" color="#FFB057" @click="getGood"></u-button>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-popup :show="goodsSpecShow" @open="open" @close="close" customStyle="border-radius:40rpx">
			<view class="parameter">
				<u-row>
					<u-col span="6">
						<u--image :src="goodInfo.goodsSpecList[kind].specImage" width="140px" height="140px"
							radius="20"></u--image>
					</u-col>
					<u-col span="6">
						<u--text :text="goodInfo.goodsName" size="16" bold lineHeight="25" color="#000"></u--text>
						<u--text :text="goodInfo.goodsDesc" size="14" lineHeight="25" color="#333"></u--text>
						<u--text :text="goodInfo.goodsSpecList[kind].preferentialPrice" mode="price" size="15"
							lineHeight="25" bold color="#FF7643"></u--text>
						<u--text :text="'原价￥'+goodInfo.goodsSpecList[kind].originalPrice" size="12" lineHeight="25"
							decoration="line-through" color="#8991A4"></u--text>
					</u-col>
				</u-row>
				<view class="specification">
					<u--text text="请选择商品规格" size="14" bold lineHeight="25" color="#333"></u--text>
					<view class="kind">
						<u-grid :border="false" @click="chooseSpecification">
							<u-grid-item :bgColor="kind==index?'#07BFA5':'#F8F8F8'"
								:customStyle="{'border-radius':'20rpx','color':index==kind?'#fff':'#333'}"
								v-for="(item,index) in goodInfo.goodsSpecList" :key="index">
								<text class="grid-text">{{item.specName}}</text>
							</u-grid-item>
						</u-grid>
						<u-divider></u-divider>
						<view style="display: flex;justify-content: space-between;">
							<view>
								<text style="margin-right: 20rpx;color: #333;">数量</text>
								<text style="color: #666666;">{{goodInfo.goodsSpecList[kind].inventory}}</text>
							</view>
							<u-number-box v-model="quantity" :max="goodInfo.goodsSpecList[kind].inventory" integer
								@change="quantityChange"></u-number-box>
						</view>
					</view>
				</view>
				<u-row>
					<u-col span="4">
						<u-button text="加入购物车" @click="addGoods(goodInfo.goodsSpecList[kind].specId)"
							customStyle="margin-top:30rpx; border:none;color:#fff;background:#07BFA5;border-radius:16rpx;"></u-button>
					</u-col>
					<u-col span="8">
						<u-button text="立即购买" @click="payGoods"
							customStyle="margin-top:30rpx; border:none;color:#fff;background:#FFB057;border-radius:16rpx;"></u-button>
					</u-col>
				</u-row>
			</view>
		</u-popup>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import {
		goodsInfo,
		addCart
	} from "@/api/pages/goods.js"
	import router from '@/api/router';
	const indicator = ref(true)
	const autoplay = ref(true)
	const circular = ref(true)
	const goodsId = ref('')
	const goodInfo = ref({})
	const evaluateFrom = ref({
		pageNo: 1,
		pageSize: 10
	})
	const goodsSpecShow = ref(false)
	const kind = ref(0)
	const quantity = ref(1)
	const payForm = ref({
		addressId: '',
		items: []
	})
	onLoad((options) => {
		console.log("123--", options.goodsId)
		goodsId.value = options.goodsId
		getGoodInfo(goodsId.value)
	})
	const getGoodInfo = async (id) => {
		const res = await goodsInfo(id).then()
		goodInfo.value = res.result
	}
	const getGood = () => {
		goodsSpecShow.value = true
	}
	const chooseSpecification = (name) => {
		kind.value = name
		console.log(name);
	}
	const quantityChange = () => {
		console.log("quantityChange")
	}
	const open = () => {
		console.log("open")
	}
	const close = () => {
		goodsSpecShow.value = false
		console.log("close")
	}
	const addGoods = async (specId) => {
		console.log("添加购物车==", specId);
		// goodsSpecList.value = list
		const cartInfor = {
			'specId': specId,
			"quantity": 1
		}
		const res = await addCart(cartInfor).then(e => {
			uni.showToast({
				title: e.message,
				icon: 'none'
			})
			close()
		})
	}
	const payGoods = () => {
		console.log("payGoods===");
		payForm.value = {
			items: [{
				// goodsDesc: goodInfo.value.goodsDesc,
				goodsId: goodInfo.value.goodsId,
				goodsImage: goodInfo.value.goodsImage,
				goodsName: goodInfo.value.goodsName,
				price: goodInfo.value.goodsSpecList[kind.value].preferentialPrice,
				specId: goodInfo.value.goodsSpecList[kind.value].specId,
				specImage: goodInfo.value.goodsSpecList[kind.value].specImage,
				specName: goodInfo.value.goodsSpecList[kind.value].specName,
				quantity: quantity.value
			}]
		}
		router.navigateTo({
			url: '/pageB/order/confirm?items=' + JSON.stringify(payForm.value.items)
		})
		close()
	}
</script>

<style scoped lang="scss">
	:deep(.u-navbar__content__left) {
		display: none;
	}

	.content {
		// width: 100%;
		padding: 0;

		.conent_box {
			margin-top: 0;

			.introduce,
			.statistics {
				margin-top: 20rpx;
				padding: 30rpx;
				border-radius: 20rpx;
				box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
				background: #fff;
				position: relative;
			}

			.imageUrl {
				width: 95%;
				padding: 20rpx 0;
				margin: auto;
				padding-bottom: 100rpx;
			}
		}

		.parameter {
			padding: 20rpx;
			border-radius: 20rpx 20rpx 0 0;
			background: #fff;

			.specification {
				padding: 20rpx;

				.kind {
					margin-top: 20rpx;
				}
			}
		}
	}
</style>